<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      width: 620px;
      height: 620px;
      border: 1px solid red;
      margin: 0 auto;
    }

    .item {
      width: 200px;
      height: 200px;
      border: 1px solid green;
    }

    .item:nth-child(4) {
      order: 2;
    }

    .item:nth-child(5) {
      order: 4;
    }

    .item:nth-child(6) {
      order: 3;
    }

    .item:nth-child(8) {
      order: 1;
    }

    .item:nth-child(7) {
      order: 2;
    }

    .item:nth-child(9) {
      order: 1;
      background-color: blue;
    }

    .active {
      border: 2px solid black;

    }
  </style>
</head>

<body>
  <a href="九宫格抽奖.html">更新版</a>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">抽奖</div>
  </div>

  <script>
    let index = 0;
    let lastindex = 7;
    let circle = 80;
    let timer = null;
    let isRun = false;
    let speed = 200;
    let btn = document.querySelector(".box>:last-child");
    let items = document.querySelectorAll(".item:not(:last-child)")
    btn.addEventListener("click", () => {
      circle = Math.ceil(Math.random() * 8 + 80)
      let timer = setInterval(() => {
        index++;
        items[(index - 1) % 8].classList.add("active");
        items[lastindex].classList.remove("active");
        lastindex = (index - 1) % 8;
        if (index == items.length) {
          index = 0;
        }
        if ((index - 1) % 8 == circle) {
          setInterval(() => {
            items[0].classList.add("active");
            items[items.length - 1].classList.remove("active");
            clearInterval(timer)
          }, 100);
        }

      }, 100);

    })









  </script>



</body>

</html>